<template>
  <div>
     <div class="divBar" />
        <h5 class="titleInfo" />

        <el-form
          ref="form2"
          class="form"
          :rules="rules2"
          :model="form2"
          label-width="150px"
        >
          <el-row>
            <el-form-item label="门店头像" prop="shop_logo">
              <newUpload
                ref="uploadImg6"
                :fileNum="1"
                :file-list="fileList6"
                :size-number="4"
              />
              <p class="msgText">* 文件格式JPG、JPEG、PNG，建议尺寸80PX*80PX</p>
            </el-form-item>

            <el-form-item label="门店环境" prop="image_ids">
              <newUpload
                ref="uploadImg7"
                :fileNum="12"
                :file-list="fileList7"
                :size-number="2"
              />
              <p
                class="msgText"
              >环境主图为展示的第一张图片，添加上传图片，最多可添加12张请上传小于2M图片，格式为jpg、png、jpeg</p>
            </el-form-item>

            <!-- <el-form-item label="作品集" prop="works_ids">
              <newUpload
                ref="uploadImg8"
                :fileNum="20"
                :file-list="fileList8"
                :size-number="2"
              />
              <p
                class="msgText"
              >商品主图为展示的第一张图片，添加上传图片，最多可添加20张请上传小于2M图片，格式为jpg、png、jpeg</p>
            </el-form-item> -->
            <!-- <el-form-item label="商家视频" prop="description2">
                <newUpload
                  ref="uploadImg"
                  :fileNum="fileNum3"
                  :fileList="fileList8"
                />
                <p class='msgText'>视频主图为展示的第一个视频，添加视频，最多可添加10个</p>
                        </el-form-item>-->
          </el-row>
          <el-form-item>
            <el-button style="margin:30px 0" type="primary" @click="submitShop('form2')">保存</el-button>
          </el-form-item>
        </el-form>
  </div>
</template>

<script>
import newUpload from '@/components/imgUpload/index'
import { savePic, picData} from '@/api/shopMessage'

export default {
  components: { newUpload },

  data() {
    var shopLogo = (rule, value, callback) => {
      if (!this.form2.shop_logo) {
        callback(new Error('请上传门店头像'))
      } else {
        callback()
      }
    }
    var imageIds = (rule, value, callback) => {
      if (!this.form2.image_ids) {
        callback(new Error('请上传门店环境'))
      } else {
        callback()
      }
    }
    return {
      fileList6: [],
      fileList7: [],
      fileList8: [],
      form2: {
        shop_logo:'',
        image_ids:[],
        works_ids:[]
      },
       rules2: {
        shop_logo: [{ required: true, validator: shopLogo }],
        image_ids: [{ required: true, validator: imageIds }]
      },
    }
  },
  created() {
    this.getPic()
  },
  methods: {
    //门店环境提交
    submitShop(e){
      // console.log(this.$refs.uploadImg4.submitUpload())
      this.form2.shop_logo = this.$refs.uploadImg6.submitUpload()[0]
      this.form2.image_ids = this.$refs.uploadImg7.submitUpload()
      // this.form2.works_ids = this.$refs.uploadImg8.submitUpload()
      this.$refs[e].validate(valid => {
        if (valid) {
          savePic(this.form2).then(res=>{
            if(res.data.code==200){
              this.$message({
              message: '提交成功',
              type: 'success'
            })
            }
          })
        } else {
            this.$message({
              message: '有必填项没填，不能提交咯',
              type: 'warning'
            })
            return false
        }
      })    
    },
    //获取门店环境   图片回显
    getPic(){
      picData().then(res=>{
        const ImgUrl = 'http://mmkapp.oss-cn-beijing.aliyuncs.com/'
        if(res.data.code==200 && res.data.data){
            let life_shop_work = res.data.data.life_shop_work.map(item=>{
              return {url:ImgUrl+item}
            })
            let life_shop_images = res.data.data.life_shop_images.map(item=>{
              return {url:ImgUrl+item}
            })


          this.fileList6 = [{url:ImgUrl+res.data.data.shop_logo}] 
          this.fileList7 = life_shop_images
          // this.fileList8 = life_shop_work
          
          this.$refs.uploadImg6.getLength(this.fileList6)
          this.$refs.uploadImg7.getLength(this.fileList7)
          // this.$refs.uploadImg8.getLength(this.fileList8)

          // this.form2.shop_logo = res.data.data.shop_logo
          // this.form2.life_shop_images = res.data.data.life_shop_images
          // this.form2.life_shop_work = res.data.data.life_shop_work
        }
      }).catch(err=>{
            this.errorStatus(err.message);
      })
    },
    // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status
      })
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, 'error')
    }
  },
}
</script>